<template>
	<view>
		<view class="flex align-center justify-center registr">
			<text class="logo">YOU-LOGO</text>
		</view>
		<view class="px-3">
			<input type="text" v-model="form.username" class="bg-light p-3 mb-3 font username" placeholder="请输入用户名" />
			<input type="password" v-model="form.password" class="bg-light p-3 mb-3 font username" placeholder="请输入密码" />
			<input type="password" v-model="form.repassword" class="bg-light p-3 mb-3 font username" placeholder="请输入确认密码" />
		</view>
		<view class="p-3 flex align-center justify-center">
			<view class="bg-main rounded p-3 flex align-center justify-center flex-1" hover-class="bg-main-hover" @click="submit">
				<text class="text-white font-md">注 册</text>
			</view>
		</view>
		<view class="flex align-center justify-center" @click="openLogin">
			<text class="text-light-muted font p-2">已有账号？请登录！</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					repassword: ''
				}
				
			}
		},
		methods: {
			openLogin() {
				uni.navigateTo({
					url: './login'
				});
			},
			submit() {
				let form = {
					username: this.form.username.trim(),
					password: this.form.password.trim(),
					repassword: this.form.repassword.trim()
				}
				if (!form.username || !form.password) {
					return uni.showToast({
						title: '用户名或密码错误',
						icon: 'none'
					});
				}
				if (form.password != form.repassword) {
					return uni.showToast({
						title: '密码不一致',
						icon: 'none'
					});
				}
				this.$H.post('/reg', form).then(res => {
					uni.showToast({
						title: '注册成功'
					});
					this.$store.dispatch('login', res)
					uni.navigateTo({
						url: '../index/index'
					});
				})
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.registr {
		height: 350rpx;
		
		.logo {
			font-size: 50rpx;
		}
		
		.username {
			height: 100rpx;
		}
	}
</style>
